<template>
  <div id="modifying">
    <img :src="userhead" alt class="userHeader">
    <div class="nickName">
      <img :src="userhead?userhead:noimg" alt @click="upimgf">
      <input type="text" placeholder="请输入修改后的昵称" v-model="nickname">
    </div>
    <div class="sub" @click="sub">确认修改</div>
  </div>
</template>

<script>
export default {
  name: "modifying",
  data() {
    return {
      noimg:require('@/assets/img/none.png'),
      userhead:'',
      nickname: ""
      /*header:""*/
    };
  },
  created(){
    this.getstatus()
  },
  methods: {
    getstatus() {
      let that = this;
      // that.$toast.loading({
      //   message: "加载中..."
      // });
      var Sukdata = {
        id: localStorage.getItem("userid")
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/user/userOne", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              that.userhead=res.data.data.head
            }
          }
        });
    },
    // 上传头像
    upimgf() {
      let that = this;
      dsBridge.call("uploadImg", 2);
      dsBridge.register("addImgCallback", function(data) {
        that.userhead = data
        // alert(that.zimg)
        console.log(data);
        let str = JSON.parse(data)
        that.$toast.loading({
          message: "加载中..."
        });
        var Sukdata = {
          zurl: str
        };
        console.log(Sukdata);
        that.axios
          .post(that.baseUrl + "/store/storeZheng", that.Qs.stringify(Sukdata), {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(function(res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                console.log(res.data);
                that.back = res.data
                that.$toast.clear();
              } else if (res.data.meta.code == 501) {
              }
            }
          });
      });
    },
    sub() {
      let that = this;
      that.$toast.loading("加载中...")
      var Sukdata = {
        userId: localStorage.getItem("userid"),
        name: that.nickname,
        img:that.userhead
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/user/changeName", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data);
              that.$toast.success({
                message:'修改成功！'
              })
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    }
  }
};
</script>

<style scoped>
.userHeader {
  display: block;
  width: 20%;
  margin: 0 auto;
  margin-top: 20px;
}
.nickName {
  width: 100%;
  display: flex;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  margin-top: 20px;
}
.nickName > img {
  display: block;
  width: 2rem;
  height: 2rem;;
  /* float: left; */
  margin-left: 5%
}
.nickName > input {
  display: block;
  margin-left: 5%;
  width: 50%;
  font-size: 16px;
  border: 0;
  outline: none;
  /* vertical-align: middle; */
}
.sub {
  width: 90%;
  margin: 0 auto;
  height: 45px;
  line-height: 45px;
  color: #fff;
  text-align: center;
  border-radius: 20px;
  background: #ff2f4e;
  font-size: 18px;
  margin-top: 80px;
}
</style>
